<template>
  <div class="constellation">
    <header class="d-flex middle">
      <div class="left flex-1 d-flex middle">
        <span @click="switchTab" id="luck">
          黄历
          <text class="iconfont icon-zhuanhuan"></text>
        </span>
      </div>
      <div class="middle flex-3 d-flex space-center">{{ star.date }}</div>
      <div class="right d-flex flex-end flex-1">
        <!-- <span @click="showDialog" id="change-constellation">切换星座</span> -->
      </div>
    </header>
    <van-dialog
      use-slot
      :show="show"
      :show-confirm-button="false"
      :close-on-click-overlay="true"
      @close="closeDialog"
    >
      <div class="dialog">
        <div class="title d-flex middle">
          <span class="d-flex flex-1" @click="closeDialog">取消</span>
          <p class="d-flex space-center flex-2">星座选择</p>
          <span class="d-flex flex-1 flex-end"></span>
        </div>
        <div class="content d-flex wrap space-between">
          <article
            v-for="(item, index) in constellationList"
            :key="index"
            @click="changeStar(index)"
            :class="[currentStar === index ? 'selectedStar' : '']"
            id="select-constellation"
          >
            <p>{{ item.name }}</p>
            <span>{{ item.date }}</span>
          </article>
        </div>
      </div>
    </van-dialog>
    <div class="info">
      <p @click="showDialog" id="change-constellation" class="d-flex space-center middle">
        <span>{{ star.name }}</span>
        <text class="iconfont icon-zhuanhuan"></text>
      </p>
      <div class="tab">
        <ul class="nav d-flex">
          <li
            v-for="(item, index) in navList"
            :key="index"
            :class="[currentTab === index ? 'active' : '', 'flex-1']"
            @click="changeTab(index)"
          >{{ item }}</li>
        </ul>
      </div>
      <div v-show="dateType === 'today' || dateType === 'tomorrow'">
        <contellation-today :constellation="detailToday"></contellation-today>
      </div>
      <div v-show="dateType === 'week' || dateType === 'month' || dateType === 'year'">
        <contellation-week :constellation="detailWeek"></contellation-week>
      </div>
      <!-- 广告位 -->
      <div style="padding: 0 10px;" v-show="showAd">
        <ad unit-id="adunit-98d66e99291778e5" @error="adError"></ad>
      </div>
    </div>
  </div>
</template>
<script>
import ContellationToday from './ConstellationToday'
import ContellationWeek from './ConstellationWeek'

export default {
  components: {
    ContellationToday,
    ContellationWeek
  },
  data() {
    return {
      detailToday: {
        all: '',
        work: '',
        love: '',
        money: '',
        health: '',
        QFriend: '',
        color: '',
        number: ''
      },
      detailWeek: {
        all: '',
        work: '',
        love: '',
        money: '',
        health: '',
        QFriend: '',
        color: '',
        number: ''
      },
      show: false,
      star: {
        name: '白羊座',
        date: '3.21-4.19'
      },
      showAd: true,
      dateType: 'today',
      currentTab: 0,
      currentStar: 0,
      navList: ['今日', '明天', '本周', '本月', '年度'],
      constellationList: [
        {
          name: '白羊座',
          date: '3.21-4.19'
        },
        {
          name: '金牛座',
          date: '4.20-5.20'
        },
        {
          name: '双子座',
          date: '5.21-6.22'
        },
        {
          name: '巨蟹座',
          date: '6.22-7.22'
        },
        {
          name: '狮子座',
          date: '7.23-8.22'
        },
        {
          name: '处女座',
          date: '8.23-9.22'
        },
        {
          name: '天秤座',
          date: '9.23-10.23'
        },
        {
          name: '天蝎座',
          date: '10.24-11.22'
        },
        {
          name: '射手座',
          date: '11.23-12.21'
        },
        {
          name: '摩羯座',
          date: '12.22-1.19'
        },
        {
          name: '水瓶座',
          date: '1.20-2.18'
        },
        {
          name: '双鱼座',
          date: '2.19-3.20'
        }
      ]
    }
  },
  onLoad() {
    this.getConstellation()
  },
  methods: {
    adError() {
      this.showAd = false
    },
    // 获取星座信息
    getConstellation() {
      wx.showLoading({
        title: '加载中'
      })
      this.$http
        .get({
          url: this.$services.GET_CONSTELLATION,
          data: {
            consName: this.star.name,
            type: this.dateType
          }
        })
        .then(res => {
          if (res.code === 0) {
            if (this.dateType === 'today' || this.dateType === 'tomorrow') {
              this.detailToday = res.body
            } else {
              this.detailWeek = res.body
            }
            wx.hideLoading()
          }
        })
    },
    // 切换到黄历yemian
    switchTab() {
      wx.setStorageSync('likeType', '0')
      this.$emit('changeShow', true)
    },
    // 显示dialog
    showDialog() {
      this.show = true
    },
    // 关闭dialog
    closeDialog() {
      this.show = false
    },
    // 切换tab栏
    changeTab(index) {
      this.currentTab = index
      this.dateType =
        index === 0
          ? 'today'
          : index === 1
            ? 'tomorrow'
            : index === 2
              ? 'week'
              : index === 3
                ? 'month'
                : index === 4
                  ? 'year'
                  : ''
      this.getConstellation()
      if (index === 0) {
        wx.reportAnalytics('click_today_constellation', {})
      } else if (index === 1) {
        wx.reportAnalytics('click_tomorrow_constellation', {})
      } else if (index === 2) {
        wx.reportAnalytics('click_week_constellation', {})
      } else if (index === 3) {
        wx.reportAnalytics('click_month_constellation', {})
      } else {
        wx.reportAnalytics('click_year_constellation', {})
      }
    },
    // 切换星座
    changeStar(index) {
      this.star = this.constellationList[index]
      this.show = false
      this.currentStar = index
      this.getConstellation()
    }
  }
}
</script>
<style lang="scss" scoped>
.constellation {
  header {
    padding: 10px;
    .common {
      border-radius: 5px;
      padding: 3px 5px;
      font-size: 14px;
    }
    .left {
      span {
        @extend .common;
        background: #d13c40;
        color: #fff;
      }
    }
    .right {
      span {
        @extend .common;
        background: #fdd86c;
      }
    }
  }
  .dialog {
    padding: 5px;
    .title {
      margin: 10px 0;
      span {
        font-size: 16px;
      }
    }
    .content {
      article {
        width: 88px;
        margin: 5px 0;
        border: 1px solid #ccc;
        padding: 5px;
        text-align: center;
        border-radius: 5px;
        font-size: 14px;
      }
      .selectedStar {
        border: 1px solid #f00;
      }
    }
  }
  .info {
    .tab {
      ul {
        li {
          text-align: center;
          border-right: 1px solid #ccc;
        }
      }
      .active {
        color: red;
      }
    }
    > p {
      font-size: 40px;
      color: #ffa92d;
      text-align: center;
      margin: 0 0 10px;
      text {
        font-size: 30px;
        margin-left: 5px;
      }
    }
  }
}
</style>

